<template>
  <!-- 折线图 -->
  <div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "90%",
    },

  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    initChart(legendData, xAxisData, series) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({

        grid: {
          top: "4%",
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: legendData.show,
          data: legendData.data,
          left: "center",
          bottom: "bottom",
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: series
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
